<template>
  <div class="box">
    <!-- 注册组件 -->
    <div class="text">
      <h3>名画浏览登录</h3>
    </div>
    <div>
      <!-- vant 样式 -->
      <van-field v-model.trim="username" label="用户名" placeholder="用户名"  :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model.trim="password"  type="password" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="primary" @click="userRegister(this.username,this.password)">注册</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    // 注册
    async userRegister (username, password) {
      const { data: res } = await this.$http({
        url: '/api/reguser',
        method: 'POST',
        headers: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: qs.stringify({ username: username, password: password })
      })
      this.$toast('注册成功')
      // 注册成功跳到登录界面
      if (res.status === 0) {
        this.username = username
        this.$router.push({
          path: '/login'
        })
      }
    }
  }
}

</script>

<style lang="less" scoped>
.box{
    width: 80%;
    margin: auto;
    margin-top: 20%;
    .text{
      width: 100%;
      margin: auto;

    }
  }
@media screen and (min-width: 1280px) {
  .box{
    border: 2px solid red;
    border-radius: 5px;
    width: 40%;
    margin: auto;
    margin-top: 20%;
    .text{
      width: 100%;
      margin: auto;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }
}
</style>
